<template>
  <div class="list">
    <el-card class="box-card">
      <div class="body">
        <el-row>
          <el-col :span="24">
            <el-row>
              <!-- <div slot="header" class="clearfix"> -->
              <el-form
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
              >
                <el-form-item label="关键字">
                  <el-input
                    clearable
                    v-model="searchForm.keyword"
                    placeholder="请输入发布人"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    round
                    class="el-icon-refresh-right"
                    @click="handleRefresh()"
                    >刷新</el-button
                  >
                </el-form-item>
              </el-form>
              <!-- </div> -->
            </el-row>
            <el-row>
              <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="id" label="编号" />
                <el-table-column prop="user.nickname" label="发布人" />
                <el-table-column prop="bullet.id" label="弹幕id" />
                <el-table-column prop="bullet.content" label="弹幕内容" />
                <el-table-column prop="reportContent" label="举报内容" />
                <el-table-column prop="reportDesc" label="举报原因" />
                <el-table-column label="状态">
                  <template v-slot="scope">
                    <el-button
                      v-if="scope.row.status == 0"
                      type="warning"
                      class="el-icon-s-check"
                      @click="showDialogAgree(scope.row)"
                      >审核中</el-button
                    >
                    <el-button
                      plain
                      v-else-if="scope.row.status == 1"
                      type="success"
                      >审核成功</el-button
                    >
                    <el-button
                      plain
                      v-else-if="scope.row.status == 2"
                      type="danger"
                      >审核失败</el-button
                    ></template
                  >
                </el-table-column>
                <el-table-column
                  prop="reportTime"
                  label="举报时间"
                  width="180"
                />
                <el-table-column width="200" fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      class="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <el-row>
              <el-pagination
                style="text-align: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog title="提示" :visible.sync="dialogAgree" width="30%" center>
      <span>举报弹幕审核，是否通过！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleDialogAgreedefeaty()"
          >拒 绝</el-button
        >
        <el-button type="success" @click="handleDialogAgreeSuccess()"
          >通 过</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { list, deleteById, saveOrUpdate } from "@/api/business/report";

const getDeptIds = (arr, dept) => {
  arr.push(dept.id);
  if (dept.children) {
    for (let i in dept.children) {
      getDeptIds(arr, dept.children[i]);
    }
  }
};

export default {
  name: "List",
  data() {
    return {
      total: 0,
      value: 0,
      dialogTitle: "",
      isSwitch: true,
      dialogAgree: false,
      dialogFormVisible: false,
      searchForm: {
        keyword: "",
        deptId: undefined,
        currentPage: 1,
        pageSize: 3,
      },
      tableData: [],
      editForm: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      reportForm: {
        id: null,
        status: 0,
      },
    };
  },
  methods: {
    fetchData(params) {
      list(params).then((res) => {
        const { data } = res;
        this.total = data.totalCount;
        this.tableData = data.data;
        this.searchForm.currentPage = data.currentPage;
        this.searchForm.pageSize = data.pageSize;
      });
    },
    onSubmit() {
      this.fetchData(this.searchForm);
    },
    handleEdit(data) {
      this.dialogFormVisible = true;
      this.dialogTitle = "员工编辑";
      this.editForm = data;
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除这一条记录, 确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteById(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.fetchData(this.fetchData);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange(currentPage) {
      this.searchForm.currentPage = currentPage;
      this.fetchData(this.searchForm);
    },
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.fetchData(this.searchForm);
    },
    handleAddForm() {
      this.dialogTitle = "员工新增";
      this.resetForm("editForm");
      this.dialogFormVisible = true;
      this.editForm = {};
    },
    handleEditForm() {
      saveOrUpdate(this.editForm).then((res) => {
        this.fetchData(this.searchForm);
        this.$message.success("操作成功！");
        this.dialogFormVisible = false;
      });
    },
    handleNodeClick(data) {
      this.searchForm.deptId = data.id;
      this.searchForm.currentPage = 1;

      let deptIds = [];
      getDeptIds(deptIds, data);
      // 重新查询员工信息
      this.searchForm.deptIds = deptIds;
      this.fetchData(this.searchForm);
    },
    /**
     * 异步发送第三方 API 接口，请求生成随机头像并返回
     */
    randomAvatar() {
      const config = {
        method: "get",
        url: "https://api.btstu.cn/sjtx/api.php",
        params: {
          lx: "b1",
          format: "json",
        },
        responseType: "json",
      };
      axios(config)
        .then((res) => {
          console.log("相应内容：", res.data);
          this.randomUrl = res.data.imgurl;
        })
        .catch((err) => {
          console.log("错误异常：", err);
          this.$message.error(err.message);
        });
    },
    handleChangeAvatar(data) {
      this.$confirm("此操作将更换当前头像, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.editForm.avatar = this.editForm = data;
          console.log(data);
          console.log(this.editForm);
          this.randomAvatar();
          // 调用接口生成随机图片
          this.editForm.avatar = this.randomUrl;
          console.log(this.editForm);
          saveOrUpdate(this.editForm).then((res) => {
            this.fetchData(this.searchForm);
            // this.$message.success("头像更换成功！");
          });
          this.$message({
            type: "success",
            message: "更换成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更换",
          });
        });
    },
    handleRefresh() {
      // location.reload();
      this.resetForm("editForm");
      this.searchForm = {};
      this.fetchData();
    },
    showDialogAgree(row) {
      this.dialogAgree = true;
      this.reportForm.id = row.id;
    },
    handleDialogAgreedefeaty() {
      this.reportForm.status = 2;
      saveOrUpdate(this.reportForm).then((res) => {
        this.dialogAgree = false;
        this.$message.success("弹幕举报审核已拒绝！");
        this.fetchData(this.searchForm);
      });
    },
    handleDialogAgreeSuccess() {
      this.reportForm.status = 1;
      saveOrUpdate(this.reportForm).then((res) => {
        this.dialogAgree = false;
        this.$message.success("弹幕举报审核通过！");
        this.fetchData(this.searchForm);
      });
    },
  },
  filters: {
    formatterFilter(isAdmin) {
      return isAdmin ? "管理员" : "普通用户";
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
.el-avatar:hover {
  cursor: pointer;
}
</style>
